<template>
  <el-form-item v-show="optionModel.dictHidden">
    <span slot="label">{{i18nt('designer.setting.selectDict')}}
    </span>
    <el-select v-model="optionModel.selectDict"  @change="onChange" filterable clearable default-first-option>
      <el-option v-for="(fv, fvIdx) in fieldValidators"
                 :key="fvIdx"
                 :label="fv.label"
                 :value="fv.value">
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script>
  import i18n from "@/utils/i18n"
  import request from '@/utils/request'
  export default {
    name: "selectDict-editor",
    mixins: [i18n],
    props: {
      designer: Object,
      selectedWidget: Object,
      optionModel: Object,
    },
    data() {
      return {
        fieldValidators: [],
      }
    },

      mounted(){
          request({
              url: '/system/dict/type/list',
              method: 'get',
              params: {pageNum: 1,pageSize: 10000,}
          }).then(res=>{
              if(res.code===200){
                  let options = [];
                  for (let value of res.rows.values()){
                      options.push({
                          label:value.dictName,
                          value:value.dictType
                      })
                  }
                  this.fieldValidators = options
              }
          })
      },
      methods:{
        onChange(value){
            this.getDictDataByType(value)
          },

          getDictDataByType(type){
              request({
                  url: '/system/dict/data/type/'+type,
                  method: 'get',
              }).then(res=>{
                  let options = [];
                  if(res.code===200){
                      for (let value of res.data.values()){
                          options.push({
                              label:value.dictLabel,
                              value:value.dictValue
                          })
                      }
                      this.selectedWidget.options.optionItems = options
                  }
              })
          }
      }
  }
</script>

<style scoped>

</style>
